<template>
  <div class="component-root-container">
    <el-header>
      <el-form
        ref="formRule"
        :rules="formRule"
        :model="queryParams"
        label-position="right"
        label-width="190px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="调用环节:" prop="process">
              <el-select
                v-model="queryParams['process']"
                placeholder="请选择"
                clearable
              >
                <el-option
                  :label="item.value"
                  :value="item.key"
                  v-for="item in options"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单编号:" prop="requestId">
              <el-input
                v-model="queryParams['requestId']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="站址编号:" prop="stationCode">
              <el-input
                v-model="queryParams['stationCode']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="铁塔编码CRM侧编码(T开头):" prop="towerId">
              <el-input
                v-model="queryParams['towerId']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="机房编码CRM侧编码(R开头):" prop="roomId">
              <el-input
                v-model="queryParams['roomId']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="铁塔类型:" prop="towerType">
              <el-input
                v-model="queryParams['towerType']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="机房类型:" prop="roomType">
              <el-input
                v-model="queryParams['roomType']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="资源侧绑定铁塔编码:" prop="towerEntityId">
              <el-input
                v-model="queryParams['towerEntityId']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="资源侧绑定铁塔类型:" prop="towerEentityType">
              <el-input
                v-model="queryParams['towerEentityType']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col> -->

          <!-- <el-col :span="8">
            <el-form-item label="资源侧绑定机房编码:" prop="entityId">
              <el-input
                v-model="queryParams['entityId']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="资源侧绑定机房类型:" prop="entityType">
              <el-input
                v-model="queryParams['entityType']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="纬度:" prop="latitude">
              <el-input
                v-model="queryParams['latitude']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="经度:" prop="longitude">
              <el-input
                v-model="queryParams['longitude']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="区县:" prop="countyCode">
              <el-input
                v-model="queryParams['countyCode']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="站址地址:" prop="stationAddress">
              <el-input
                v-model="queryParams['stationAddress']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="场景划分:" prop="scene">
              <el-input
                v-model="queryParams['scene']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8" :offset="16" class="col_button">
            <div class="button">
              <el-button class="query" @click="buttonClick">
                查询
              </el-button>
              <el-button class="query" @click="reset">
                重置
              </el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-header>
    <el-main>
      <div class="contentInfo" style="margin-bottom:20px;">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            场景使用情况
          </el-col>
        </el-row>
        <el-row>
          <div class="inline">
            <div>
              <span>调用次数/日：</span><span>{{ query.count }}</span>
            </div>
            <div>
              <span>拦截比率：</span><span>{{ query.rate }}</span>
            </div>
            <div>
              <a
                class="link"
                href="javascript:;"
                @click="$router.push({ name: 'biz-ml' })"
                >详情</a
              >
            </div>
          </div>
        </el-row>
      </div>
      <div class="contentInfo">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            场景说明
          </el-col>
        </el-row>
        <el-row>
          <div class="page-tip">
            <div class="description">
              CRM调用内存数据库接口，实现在一站一塔的条件下，订单关联站址铁塔机房编码、铁塔类型、订单关联站址地址、经纬度、订单区县、场景划分等信息一致性校验
            </div>
          </div>
          <div class="page-tip">
            <div class="params-tip" @click.ctrl.alt="clickExample">
              <span>示例参数</span>：调用环节:订单编制, 订单编码:1223041812335819, 站址编码:450923500000001799, 铁塔编码CRM侧编码（T开头）:T450923500000001799112001, 机房编码CRM侧编码（R开头）:R4509235000000017990401, 铁塔类型:景观塔, 机房类型:一体化机柜, 纬度:22.347696, 经度:109.966349, 区县:450923, 站址地址:博白县六山村附近山头, 场景划分:05
            </div>
          </div>
        </el-row>
      </div>
    </el-main>

    <el-main>
      <div class="contentInfo">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            校验结果
          </el-col>
        </el-row>
        <el-row>
          <div class="page-tip">
            <div class="description">
              <el-row v-for="(item, index) in dialogData" :key="index">
                <el-col> 订单编号: {{ item.requestId }} </el-col>
                <el-col>
                  校验结果:
                  {{ item.verifyCode == "0" ? "审核未通过" : "审核通过" }}
                </el-col>
                <el-col> 说明: {{ item.returnMsg || "无" }} </el-col>
              </el-row>
            </div>
          </div>
        </el-row>
      </div>
    </el-main>
  </div>
</template>

<script>
import mixin from "./mixins";
export default {
  name: "LatitudeAndLongitudeVerify", //场景划分、区县、站址经纬度信息一致性校验
  mixins: [mixin],
  data() {
    return {
      query: {
        count: 0,
        rate: "--"
      },
      dialogData: [],
      queryParams: {
        process: "", //调用环节
        requestId: "", //订单编号
        stationCode: "", //站址编码
        towerId: "", //铁塔编码CRM侧编码（T开头）
        roomId: "", //机房编码CRM侧编码（R开头）
        towerType: "", //铁塔类型
        roomType: "", //机房类型
        // towerEntityId: "", //资源侧绑定铁塔编码
        // towerEentityType: "", //资源侧绑定铁塔类型
        // entityId: "", //资源侧绑定机房编码
        // entityType: "", //资源侧绑定机房类型
        latitude: "", //纬度
        longitude: "", //经度
        countyCode: "", //区县
        stationAddress: "", //站址地址
        scene: "" //场景划分
      },
      options: [
        {
          key: "1",
          value: "订单编制"
        },
        {
          key: "2",
          value: "交付验收"
        }
      ],
      formRule: {
        // please give me the above comments keys's formRule verification
        process: [
          { required: true, message: "请选择调用环节", trigger: "blur" }
        ],
        requestId: [
          { required: true, message: "请输入订单编号", trigger: "blur" }
        ],
        stationCode: [
          { required: true, message: "请输入站址编码", trigger: "blur" }
        ],
        towerId: [
          { required: true, message: "请输入铁塔编码", trigger: "blur" }
        ],
        roomId: [
          { required: true, message: "请输入机房编码", trigger: "blur" }
        ],
        towerType: [
          { required: true, message: "请输入铁塔类型", trigger: "blur" }
        ],
        roomType: [
          { required: true, message: "请输入机房类型", trigger: "blur" }
        ],
        towerEntityId: [
          {
            required: true,
            message: "请输入资源侧绑定铁塔编码",
            trigger: "blur"
          }
        ],
        towerEentityType: [
          {
            required: true,
            message: "请输入资源侧绑定铁塔类型",
            trigger: "blur"
          }
        ],
        entityId: [
          {
            required: true,
            message: "请输入资源侧绑定机房编码",
            trigger: "blur"
          }
        ],
        entityType: [
          {
            required: true,
            message: "请输入资源侧绑定机房类型",
            trigger: "blur"
          }
        ],
        latitude: [{ required: true, message: "请输入纬度", trigger: "blur" }],
        longitude: [{ required: true, message: "请输入经度", trigger: "blur" }],
        countyCode: [
          { required: true, message: "请输入区县", trigger: "blur" }
        ],
        stationAddress: [
          { required: true, message: "请输入站址地址", trigger: "blur" }
        ],
        scene: [{ required: true, message: "请输入场景划分", trigger: "blur" }]
      }
    };
  },
  created() {
    this.queryPageCount("5.21");
  },
  mounted() {},
  methods: {
    async buttonClick() {
      try {
        await this.$refs["formRule"].validate();
        this.dialogData = [];
        var params = {
          process: this.queryParams.process,
          requestId: this.queryParams.requestId,
          stationCode: this.queryParams.stationCode,
          towerId: this.queryParams.towerId,
          roomId: this.queryParams.roomId,
          towerType: this.queryParams.towerType,
          roomType: this.queryParams.roomType,
          latitude: this.queryParams.latitude,
          longitude: this.queryParams.longitude,
          countyCode: this.queryParams.countyCode,
          stationAddress: this.queryParams.stationAddress,
          scene: this.queryParams.scene
        };
        //console.log(params)
        const r = await this.$http({
          url: this.$http.adornBizUrl("/siteValidationBeforeLease/check"),
          method: "post",
          data: this.$http.adornData("param=" + JSON.stringify(params), false),
          headers: {
            "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
          }
        });
        if (Array.isArray(r.data.data)) {
          this.dialogData = r.data.data;
        } else {
          this.dialogData = [r.data.data];
        }
      } catch (e) {
        console.log(e);
      } finally {
      }
    },
    reset() {
      this.queryParams = {
        process: "", //调用环节
        requestId: "", //订单编号
        stationCode: "", //站址编码
        towerId: "", //铁塔编码CRM侧编码（T开头）
        roomId: "", //机房编码CRM侧编码（R开头）
        towerType: "", //铁塔类型
        roomType: "", //机房类型
        // towerEntityId: "", //资源侧绑定铁塔编码
        // towerEentityType: "", //资源侧绑定铁塔类型
        // entityId: "", //资源侧绑定机房编码
        // entityType: "", //资源侧绑定机房类型
        latitude: "", //纬度
        longitude: "", //经度
        countyCode: "", //区县
        stationAddress: "", //站址地址
        scene: "" //场景划分
      };
      this.dialogData = [];
      this.$refs["formRule"].clearValidate();
    },
    change(e) {
      this.$forceUpdate();
    },
    async queryPageCount(scene) {
      try {
        const r = await this.$http({
          url: this.$http.adornBizUrl("/log/queryStatistics"),
          method: "post",
          data: this.$http.adornData(
            "param=" + JSON.stringify({ scene: scene }),
            false
          ),
          headers: {
            "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
          }
        });
        if (r.data.data && r.data.data.length > 0) {
          var result = r.data.data[0];
          this.query.count = result.cnt || "0";
          this.query.rate =
            result.per == null ? "--" : (result.per * 100).toFixed(1) + "%";
        }
      } catch (e) {
        console.log(e);
      } finally {
      }
    }
  }
};
</script>

<style scoped lang="scss">
@import "../../../assets/scss/_formatQueryPage";
@include formatQueryPage(190px, 60%, right);
.el-input {
  width: 60%;
}

.el-select {
  width: 60%;
}

.query {
  color: rgba(255, 255, 255, 1);
  background: rgba(235, 75, 75, 1);
  border-radius: 6px;
  border-color: rgba(235, 75, 75, 1);
}
</style>
